﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo eCard</title>
    <link href="css/Style.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    <script src="js/jscolor.js" type="text/javascript"></script>
    <script src="js/Common.js" type="text/javascript"></script>
    
    <!-- Declare CSS class-->
    <style type="text/css">
        .txtBold {
            font-weight: bold;
        }
        
        
        
    </style>

    <!-- Functions Javascript here-->
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#divAddTxt").click(function () {
                // call ajax render

                $.ajax({
                    type: "GET",
                    url: "AjaxRender.aspx",
                    data: "text=mrphuong",
                    success: function (msg) {

                        $("#divCanvasElements").append(msg);

                        $(".drag").draggable({
                            //  addClasses: false,
                            containment: '#divCanvas',
                            cursor: 'move',
                            snap: '#divCanvas'
                        }
                     );
                    }
                });

            });

            // Xu li cac su kien cua cac control thay doi style
            //1. Bold

            $("#divBold").click(function () {
                var hdfval = $("#hdfselectedid").val();
                //  alert(hdfval);
                $("#" + hdfval).css('font-weight', 'bold');

            });
            // 2. Italic
            $("#divItalic").click(function () {
                var hdfval = $("#hdfselectedid").val();
                $("#" + hdfval).css('font-style', 'italic');

            });

            //3. Underline
            $("#divUnderline").click(function () {
                var hdfval = $("#hdfselectedid").val();
                $("#" + hdfval).css('text-decoration', 'underline');

            });

            // 4. Font Size
            $('#fontSize').bind('change', function () {

                var hdfval = $("#hdfselectedid").val();
                var size = $(this).val();
                $("#" + hdfval).css('font-size', size + 'px');
            });

            //5. Font Family
            $('#fontFamily').bind('change', function () {

                var hdfval = $("#hdfselectedid").val();
                var family = $(this).val();
                $("#" + hdfval).css('font-family', family);
            });

            // 6.Change Text
            $("#txtElement").keyup(function () {
                var hdfval = $("#hdfselectedid").val();
                $("#" + hdfval).text($(this).val());
            });

            // 7. Change color

            //8. Change Text align
            



        });      // end document ready
         //[Start] Cac ham xu li den event cua doi tuong

         //1.Set ID of selected control into hidden field

         function setToHdfSelectedID(selectid) {

             $("#hdfselectedid").val(selectid.id);

         }

         function clearHdfSelectedID() {

             $("#hdfselectedid").val("");

         }
     
         
         //2. 


         //[End] Cac ham xu li den event cua doi tuong
        </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table cellpadding="0" cellspacing="0" width="960px" align="center">
    <tr>
      <td align="left"><!-- Header Spacer -->
        
        <div id="divHeaderSpacer" style="height:20px;"></div>
        
        <!-- Body -->
        
        <div id="BodyContent">
          <div style="width: 760px; position: relative;"> 
            <!-- Hidden Elements --> 
            <!-- The div that holds the bleed prompt -->
            <table cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td align="left" valign="top">
                      <div id="divStudioContainer" style="z-index: 1; width: 1px; position: relative; left: 5px; top: 0px; height: 482.5px; ">
                    
                    <!-- Toolbar [start] -->
                    
                    <div id="divToolbar" style="position: absolute; left: 195px; top: 0px; z-index: 9; width: 500px; height: 60px;  border:solid; border-color:#999 ; background-color:#">
                      <div id="divGenCtrls" style="position: absolute; left: 5px; top: 5px; ">
                        <div id="divAddImg" style="position: absolute; left: 0px; top: 26px; width: 105px; height: 22px; background-image: url(Images/AddUpdateImage.png); cursor: pointer; overflow: hidden; " title="Add Logo/Artwork"></div>
                        <div id="divAddTxt" style="position: absolute; left: 117px; top: 24px; width: 80px; height: 24px; background-image: url(Images/addText.gif); cursor: pointer; overflow: hidden; " title="Add Text"></div>
                        <div id="divcolor" style="position: absolute; left: 197px; top: 24px; width: 80px; height: 24px;  cursor: pointer; overflow: hidden; " >
                          <input class="color" value="FFFF33"/>
                        </div>
                        <div id="divZoomCtrl" style="position: absolute; left: 300px; top: 24px; width: 69px; height: 24px; ">
                          <div id="divZoomIn" style="position: absolute; left: 0px; top: 0px; width: 24px; height: 24px; background-image: url(Images/zoomIn.gif); cursor: pointer; overflow: hidden; " title="25% Larger"></div>
                          <div id="divZoomOut" style="position: absolute; left: 25px; top: 0px; width: 24px; height: 24px; background-image: url(Images/zoomOut.gif); cursor: pointer; overflow: hidden; " title="25% Smaller"></div>
                        </div>
                        <div id="divDeleteBt" style="position: absolute; left: 350px; top: 0px; width: 70px; height: 24px; background-image: url(Images/delete.gif); cursor: pointer; overflow: hidden; " title="Clear Text / Remove Image"></div>
                        <div id="divSaveTemplateBt" style="position: absolute; left: 350px; top: 27px; width: 98px; height: 22px; background-image: url(Images/SaveMyDesign.png); cursor: pointer; overflow: hidden; " title="Save My Design"></div>
                      </div>
                      <div id="divFormatCtrls" style="position: absolute; left: 5px; top: 5px; ">
                        <div id="divStyleCtrls" style="position: absolute; left: 0px; top: 0px; ">
                          <div id="divFontControl" style="position: absolute; left: 0px; top: 0px; width: 90px; height: 21px; ">
                            <select id="fontFamily" name="font">
                              <option value="Arial">Arial</option>
                              <option value="TimesNewRoman">Times New Roman</option>
                              <option value="Tahoma">Tahoma</option>
                              <option value="Verdana">Verdana</option>
                            </select>
                          </div>
                          <div id="divFontSizeControl" style="position: absolute; left: 140px; top: 0px; width: 60px; height: 21px; ">
                            <select id="fontSize" name="fontSize">
                              <option value="6">6pt</option>
                              <option value="7">7pt</option>
                              <option value="8">8pt</option>
                              <option value="9" selected="selected">9pt</option>
                              <option value="10">10pt</option>
                              <option value="11">11pt</option>
                              <option value="12">12pt</option>
                              <option value="13">13pt</option>
                              <option value="14">14pt</option>
                              <option value="16">16pt</option>
                              <option value="17">17pt</option>
                              <option value="18">18pt</option>
                              <option value="19">19pt</option>
                              <option value="20">20pt</option>
                            </select>
                          </div>
                          <div id="divBold" style="position: absolute; left: 200px; top: 0px; width: 23px; height: 22px; background-image: url(Images/FontBoldOff.gif); cursor: pointer; overflow: hidden; " title="Bold"></div>
                          <div id="divItalic" style="position: absolute; left: 225px; top: 0px; width: 23px; height: 22px; background-image: url(Images/FontItalicOff.gif); cursor: pointer; overflow: hidden; " title="Italic"></div>
                          <div id="divUnderline" style="position: absolute; left: 250px; top: 0px; width: 23px; height: 22px; background-image: url(Images/FontUnderlineOff.gif); cursor: pointer; overflow: hidden; " title="Underline"></div>
                        </div>
                        <div id="divAlignCtrls" style="position: absolute; left: 275px; top: 0px; ">
                          <div id="divLAlign" style="position: absolute; left: 0px; top: 0px; width: 23px; height: 22px; background-image: url(Images/AlignLeftOff.gif); cursor: pointer; overflow: hidden; " title="Left Justify"></div>
                          <div id="divCAlign" style="position: absolute; left: 25px; top: 0px; width: 23px; height: 22px; background-image: url(Images/AlignCenterOff.gif); cursor: pointer; overflow: hidden; " title="Center Justify"></div>
                          <div id="divRAlign" style="position: absolute; left: 50px; top: 0px; width: 23px; height: 22px; background-image: url(Images/AlignRightOff.gif); cursor: pointer; overflow: hidden; " title="Right Justify"></div>
                        </div>
                      </div>
                      <div id="divNavCtrls" style="position: absolute; left: 0px; top: 397.5px; "> </div>
                    </div>
                    
                    <!-- Toolbar end -->
                    
                       <!-- Text editor start -->
                    <div id="divTextEditor" style="position: absolute; left: 0px; top: 0px; z-index: 4;">
                        
                      <div class="textElementEditor" id="divElementContainer_0" style="height: 40px; ">
                          
                        <div class="elementTitleField">Type your Text</div>
                        <input class="elementTextBox" id="txtElement" />

                      </div>
                      
                    </div>
                      <!-- Text editor End -->
                      
                    <!--ECARD // Div container  Start-->
                    
                    <div id="divCanvas" style="position: relative; left: 195px; top: 85px; z-index: 2; width: 411.25px; height: 297.5px; border:dashed ; border-color:#999 ">
                    
                      <div id="divCanvasElements" style="position: absolute; left: 0px; top: 0px; z-index: 2; "> </div>
                 
               <%--    <div id="bc08f579-33c1-410a-8bda-0f143b3fca1f" class="drag" style="position: absolute ">
	            <span id="4106257b-cd67-4e5f-a552-d8ad306aa34e" style="color:#000000;font-family:Times New Roman;font-size:10pt;font-weight:normal;font-style:normal;text-decoration:none;height:0px;width:0px;Align:Left;top:0;left:0;right:0;bottom:0;display:inline;" onclick="setToHdfSelectedID(this)" >mrphuong</span>
                        </div>--%>

                    </div>
                          <input type="hidden" id="hdfselectedid" value=""/>

                    <!--ECARD // Div container End -->
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
                  
        </div></td>
    </tr>
  </table>
 
    </div>
    </form>
</body>
</html>
